<template>
    <div class="edit-preference">
      <h1>编辑用户喜好</h1>
      <form @submit.prevent="saveChanges">
        <div class="form-group">
          <label>用户ID：</label>
          <input v-model="form.userId" required>
        </div>
        
        <div class="form-group">
          <label>标签名称：</label>
          <select v-model="form.tag" required>
            <option v-for="tag in tagOptions" :key="tag" :value="tag">{{ tag }}</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>喜好占比：</label>
          <input v-model="form.percentage" type="text" required>
        </div>
        
        <div class="form-actions">
          <button type="submit" class="save-btn">保存</button>
          <router-link to="/" class="cancel-btn">取消</router-link>
        </div>
      </form>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import Service from '@/router/interceptor.js'
  import { ElMessage } from 'element-plus'
  
  const route = useRoute()
  const router = useRouter()
  
  const tagOptions = ['科技', '娱乐', '教育', '游戏', '音乐', '体育']
  
  const form = ref({
    userId: '',
    tag: '科技',
    percentage: ''
  })
  
  // 从路由参数获取要编辑的ID
  onMounted(async () => {
    try {
      const itemId = route.params.id
      console.log(route.params.id)
      // 获取原始数据
      const response = await Service.get(`/api/userFlavor/getUserFlavorById`,{
        params: { id: itemId }
      })
      if (response.code === 200) {
        console.log(response)
        form.value = {
          userId: response.data.uid,
          tag: response.data.tname,
          percentage: response.data.tpercent.toString().replace('%', '')
        }
      }
    } catch (error) {
      ElMessage.error('数据加载失败')
    }
  })
  
  const saveChanges = async () => {
    try {
      // 构造JSON请求体
      const requestBody = {
        id: route.params.id, // 编辑需要传记录ID
        userId: form.value.userId,
        tag: form.value.tag,
        percentage: Number(form.value.percentage) // 转换为数字
      }
  
      const response = await Service.put('/api/userFlavor/update', requestBody)
      
      if (response.data.code === 200) {
        ElMessage.success('更新成功')
        router.push('/user-preference')
      } else {
        ElMessage.error(response.data.info || '更新失败')
      }
    } catch (error) {
      const errorMsg = error.response?.data?.info 
        || error.response?.data?.message 
        || error.message 
        || '请求异常'
      ElMessage.error(errorMsg)
    }
  }
  </script>
  
  <style scoped>
  .edit-preference {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  label {
    display: inline-block;
    width: 100px;
  }
  
  input, select {
    padding: 8px;
    width: 200px;
  }
  
  .save-btn {
    background: #4CAF50;
    color: white;
    padding: 10px 15px;
    margin-right: 10px;
  }
  
  .cancel-btn {
    padding: 9px 15px;
    border: 1px solid #ddd;
  }
  </style>